<template>
  <div>
    <card
      :title="title"
      :headstyle="cardstyle"
      :class="initAnchorInfo"
      shadow="nerver"
    >
      <PublicTable
        ref="table1"
        :loading="false"
        :table-data="tginfo"
        :columns="tgcolumns(this)"
        :options="options"
      />
    </card>
    <el-image-viewer
      v-show="showViewer"
      :on-close="closeViewer"
      :url-list="[dialogImageUrl]"
    />
  </div>
</template>

<script>
const tgcolumns = (_this) => [
  {
    label: "垛位或泊位",
    prop: "PILENO",
  },
  {
    label: "上传日期",
    prop: "SCDATE",
  },
  {
    label: "图片",
    prop: "SCYP",
    click(e) {
      _this.preImgs(e.SCYP)
    }
  },
  {
    label: "描述",
    prop: "MEMO",
  }
];

export default {
  name: "Imgxs",
  components: {
    "el-image-viewer": () =>
      import("element-ui/packages/image/src/image-viewer"),
  },
  props: {
    initAnchorInfo: {
      type: String,
      default: "xxxxxxxx",
    },
    cardstyle: {
      type: Object,
      default() {
        return {}
      },
    },
    title: {
      type: String,
      default() {
        return ""
      },
    },
    shipseq: {
      type: String,
      default() {
        return ""
      },
    },
  },
  data() {
    return {
      cardzbstyle: {
        backgroundColor: "#fff",
      },
      tginfo: [],
      tgcolumns,
      options: {},
      showViewer: false,
      dialogImageUrl: "",
    }
  },
  computed: {
    infoform() {
      return this.info[0] || {}
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    closeViewer() {
      this.showViewer = false
    },
    preImgs(e) {
      const url = `http://192.168.195.6/AjaxAttachAction.do?actionType=showimage&id=${e}`;
      this.dialogImageUrl = url;
      this.showViewer = true
      // this.$utils.selectFile(e).then((file) => {
      //   console.log(file);
      //   // const url = `${process.env.VUE_APP_API1}/attach/upload/${file[0].name}`;
      //   // http://192.168.195.6/AjaxAttachAction.do?actionType=showimage&id=89914
      // });
    },
    init() {
      this.queryinfo()
    },
    // 查询船舶基本信息
    queryinfo() {
      this.$api.summary.JK_SHIP_ZLINFO({ shipseq: this.shipseq }).then((val) => {
        this.tginfo = val.zlsb
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.zy_title{
  text-align: center;
  font-size: 17px;
}
</style>
